<template>
  <div class="my-content">
    <div class="header-top" style="margin-bottom: 20px;">
      <div class="left-btn">
        <el-button type="primary" @click="linkToAdd" :loading="modelLoading">{{ publishText }}</el-button>
        <template>
          <el-button>排序</el-button>
        </template>
      </div>
      <div class="right-btn">
        <el-input class="keywords-search" v-show="!isShowSearch" v-model="searchForm.keywords" placeholder="输入内容标题或正文关键词" @keydown.enter="onSubmit">
          <template #suffix>
            <i class="iconfont" @click="onSubmit">&#xe643;</i>
          </template>
        </el-input>
        <el-button class="el-btn2" @click="isShowSearch = !isShowSearch">
          高级搜索
        </el-button>
        <div class="change-card">
          <el-tooltip content="卡片列表" placement="bottom" effect="light">
            <a :class="{'active': tableType === 'card'}" href="javascript:;" @click="changeTable('card')"><i class="iconfont">&#xe6c9;</i></a>
          </el-tooltip>
          <el-tooltip content="文字表格" placement="bottom" effect="light">
            <a :class="{'active': tableType === 'table'}" href="javascript:;" @click="changeTable('table')"><i class="iconfont">&#xe6ca;</i></a>
          </el-tooltip>
        </div>
      </div>
    </div>
    <!-- 卡片样式 -->
    <div v-if="tableType === 'card'">
      <div class="content-table" v-loading="tableLoading" v-if="tableData.length !== 0">
        <div class="ruifox-card-box ruifox-card-table">
          <div class="ruifox-card" :class="{'card-focus': index === showCardOptions.id && showCardOptions.show}" v-for="(element,index) in tableData" :key="element.id +'-'+ index" @mouseenter="showOptions(index)" @mouseleave="closeOptions()">
            <div class="ruifox-card-sn">
              <span class="card-index">{{index + 1}}</span>
            </div>
            <div class="ruifox-card-title">
              <div class="card-title-top">
                <div class="card-title-btn-box">
                  <span class="model-tip">
                    <Icon :name="element.islink ? 'icon-wailian' : getModelIcon(element.model_id)"></Icon>
                  </span>
                </div>
                <p :title="element.title.replace(/<[^>]+>/g,'')" class="unmover">
                  <a href="javascript:;" @click="handleViewDetail(element)">{{element.title.replace(/<[^>]+>/g,"")}}</a>
                </p>
              </div>
              <div class="card-title-bottom">
                <span :class="{'is-locked': element.is_locked === 1}" class="lock-icon">
                  <i class="iconfont" v-html="element.invertLock === 1 || element.is_locked === 1 && element.invertLock === undefined ? '&#xe6e0;' : '&#xe6df;'"></i>
                </span>
                <div class="type-btn-box" v-if="element.thumb || element.is_origin == 0">
                  <el-popover>
                    <template #reference>
                      <span class="p-icon" v-show="element.thumb"><i class="iconfont">&#xe6d1;</i></span>
                    </template>
                    <template #default>
                      <div class="thumb-box" style="max-width: 150px;max-height: 300px">
                        <img :src="element.thumb" alt="" style="width: 100%;height: 100%">
                      </div>
                    </template>
                  </el-popover>
                  <i title="站内投递" v-if="element.id !== element.did" class="iconfont push-icon">&#xe621;</i>
                </div>
                <div class="title-tips">
                  <span v-if="element.publish_time" title="发布时间" :class="{'is-timing': element.type === 2}"><i class="iconfont">&#xe6f0;</i> {{element.publish_time}}</span>
                  <span v-if="element.expire_time" title="撤稿时间" :class="{'is-timing': element.type === 3}"><i class="iconfont">&#xe6e8;</i> {{element.expire_time}}</span>
                  <span v-if="element.comefrom" title="来源部门"><i class="iconfont">&#xe6e1;</i> {{element.comefrom}}</span>
                  <span v-if="element.username" title="创建人"><i class="iconfont">&#xe6e3;</i> {{element.username}}</span>
                  <span v-if="element.column" title="栏目"><i class="iconfont">&#xe6e2;</i> {{element.column}}</span>
                </div>
              </div>
            </div>

            <div class="ruifox-card-state" v-show="!(index === showCardOptions.id && showCardOptions.show)">
              <div class="card-state-top">
                <p class="ready-time" v-if="element.status === 5 || element.status === 6">
                  将在
                  <u v-if="element.status === 5">{{timeInterval(element.publish_time)[0]}}</u>
                  <u v-if="element.status === 6">{{timeInterval(element.expire_time)[0]}}</u>
                  天
                  <u v-if="element.status === 5">{{timeInterval(element.publish_time)[1]}}</u>
                  <u v-if="element.status === 6">{{timeInterval(element.expire_time)[1]}}</u>
                  小时后
                  {{element.status === 5 ? '发布' : '撤稿'}}
                </p>
                <span v-if="element.status === 1" class="on-info">待发布</span>
                <span v-if="element.status === 2" class="then-release">已发布</span>
                <span v-if="element.status === 3" class="ready-review">待审核</span>
                <span v-if="element.status === 4" class="on-review">审核中</span>
                <span v-if="element.status === 5" class="ready-release">即将发布</span>
                <span v-if="element.status === 6" class="ready-offline">即将撤稿</span>
              </div>
            </div>
            <Transition name="options">
              <div class="ruifox-card-options unmover" v-show="index === showCardOptions.id && showCardOptions.show">
                <div class="inner-card-options">
                  <el-button v-if="element.status === 1" class="option-btn" text size="small" :class="{'is-disabled': element.is_locked === 1 || element.can_edit === 0}" :disabled="element.is_locked === 1 || element.can_edit === 0" @click="handleEdit(element)">
                    <i class="iconfont">&#xe6e6;</i>
                    编辑
                  </el-button>
                  <el-button v-else class="option-btn" text size="small" :class="{'is-disabled': element.is_locked === 1 || element.can_edit === 0}" :disabled="element.is_locked === 1 || element.can_edit === 0" @click="handleReEdit(element)">
                    <i class="iconfont">&#xe6e6;</i>
                    编辑
                  </el-button>
                  <el-button class="option-btn" text size="small" :class="{'is-disabled': element.can_revoke !== 1}" :disabled="element.can_revoke !== 1" @click="handleRevoke(element)">
                    <i class="iconfont">&#xe6e8;</i>
                    撤稿
                  </el-button>
                  <el-dropdown>
                    <el-button class="more-btn" text size="small">
                      <i class="iconfont">&#xe6dc;</i>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu @mouseenter="showOptions(index)">
                        <el-dropdown-item type="primary" plain size="small" @click="handleView(element)">
                          <i class="iconfont">&#xe6ef;</i>
                          前台浏览
                        </el-dropdown-item>
                        <el-dropdown-item v-if="element.can_delete === 1 && element.status === 1" type="primary" plain size="small" @click="handleDelete(element)">
                          <i class="iconfont">&#xe687;</i>
                          删除
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </Transition>
          </div>
        </div>
      </div>
      <div v-else class="content-table-nodata" v-loading="tableLoading">
        <el-empty description="暂无数据" />
      </div>
    </div>
    <!-- 表格样式 -->
    <div v-else>
      <el-table :data="tableData" v-loading="tableLoading" class="libarary-table">
        <el-table-column type="index" width="55" label="序号" align="center" fixed/>
        <el-table-column prop="title" label="标题" fixed width="400px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="model_id" label="类型" width="100px">
          <template #default="{row}">
            <span>{{getModelName(row.model_id)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="column" label="栏目" min-width="200px" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="" label="状态" width="120px">
          <template #default="{row}">
            <el-tag v-if="row.status === 1" type="info">待发布</el-tag>
            <el-tag v-if="row.status === 2" type="success">已发布</el-tag>
            <el-tag v-if="row.status === 3" type="info">待审核</el-tag>
            <el-tag v-if="row.status === 4" type="info">审核中</el-tag>
            <el-tag v-if="row.status === 5" type="warning">即将发布</el-tag>
            <el-tag v-if="row.status === 6" type="info">即将撤稿</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="publish_time" label="发布时间" width="200px">
          <template #default="{row}">
            <span class="publish_time">{{row.publish_time}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="创建人" width="120px" show-overflow-tooltip/>
        <el-table-column prop="comefrom" label="来源部门" width="120px" show-overflow-tooltip/>
        <el-table-column label="操作" align="center" width="180px" fixed="right">
          <template #default="{row}">
            <div class="button-box">
              <el-button type="primary" v-if="row.status === 1" class="option-btn" text size="small" :class="{'is-disabled': row.is_locked === 1 || row.can_edit === 0}" :disabled="row.is_locked === 1 || row.can_edit === 0" @click="handleEdit(row)">
                编辑
              </el-button>
              <el-button type="primary" v-else class="option-btn" text size="small" :class="{'is-disabled': row.is_locked === 1 || row.can_edit === 0}" :disabled="row.is_locked === 1 || row.can_edit === 0" @click="handleReEdit(row)">
                编辑
              </el-button>
              <el-button type="primary" class="option-btn" text size="small" :class="{'is-disabled': row.can_revoke !== 1}" :disabled="row.can_revoke !== 1" @click="handleRevoke(row)">
                撤稿
              </el-button>
              <el-dropdown trigger="hover">
                <i class="iconfont">&#xe771;</i>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item type="primary" plain size="small" @click="handleView(row)">
                      <i class="iconfont">&#xe6ef;</i>
                      前台浏览
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <PaginationView
        :total="total"
        :pageSize="params.pageSize"
        :currentPage="params.currentPage"
        @changeSize="handleSizeChange"
        @currentChange="handleCurrentChange"
        @refreshList="_getContentPage"
    />
  </div>
</template>

<script setup>
/* eslint-disable */
import { ref, reactive, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox }  from "element-plus"
import { useRouter } from "vue-router"
import { getContentPage, deleteContent } from "@/api/content"
import { formatDate, myDebounce } from "@/utils/tools"

const router = useRouter()
const store = useStore()
const tableLoading = ref(false)

const isShowSearch = ref(false)
const searchForm = reactive({})
// 获取可以发布模型列表
const publishText = ref('发布文章')
const options = ref(store.state.content.modelList)
const publish_type = ref(0)
store.dispatch('content/updateModelList').then(res => {
  options.value = res
})
const getModelIcon = (modelId) => {
  if(modelId === 0) return '全部'
  let _obj = options.value.find(item => {return Number(modelId) === Number(item.id)})
  return _obj ? _obj.icon : ''
}
const getModelName = (modelId) => {
  if(modelId === 0) return '全部'
  let _obj = options.value.find(item => {return Number(modelId) === Number(item.id)})
  return _obj ? _obj.name : ''
}
const showCardOptions = reactive({
  id: 0,
  show: false,
})
const _showOptions = (id) => {
  if(store.getters.isScroll) return
  showCardOptions.id = id
  showCardOptions.show = true
}
const showOptions = myDebounce(_showOptions, 10)
const _closeOptions = () => {
  showCardOptions.show = false
}
const closeOptions = myDebounce(_closeOptions, 10)

//获取内容列表
const tableData = ref([])
const total = ref(0)
const params = reactive({
  currentPage: 1,
  pageSize: 10,
  catId: 1
})
const _getContentPage = async () => {
  tableLoading.value = true
  let res = await getContentPage(params)
  tableData.value = res.data.list
  total.value = res.data.total
  tableLoading.value = false
}
const handleSizeChange = (size) => {
  params.pageSize = size
  //   重新获取数据
  _getContentPage()
}
const handleCurrentChange = (page) => {
  params.currentPage = page
  //   重新获取数据
  _getContentPage()
}
// 时间间隔函数
const timeInterval = (time) => {
  let specificTime = new Date(time);
  let currentTime = new Date();
  let timeDifference = currentTime.getTime() - specificTime.getTime();
  let days = Math.floor(timeDifference / (24 * 60 * 60 * 1000));
  let hours = Math.floor((timeDifference % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
  return [days,hours]
}
_getContentPage()
// 内容操作
// 草稿编辑
const handleEdit = (data) => {
  let toUrl;
  let _obj = options.value.find(item => {return data.model_id === item.id})

  publish_type.value = _obj.publish_type
  //传入modelid
  if(publish_type.value === 1){
    toUrl = router.resolve({
      path: '/content/contentManage/stationContent/add',
      query: {
        modelId: data.model_id,
        catId: data.catid,
        draftId: data.id
      }
    })
  }else{
    toUrl = router.resolve({
      path: '/content/contentManage/commonContent/add',
      query: {
        modelId: data.model_id,
        catId: data.catid,
        draftId: data.id
      }
    })
  }
  window.open(toUrl.href,"_blank")
}
// 重新编辑
const handleReEdit = (data) => {
  let toUrl;
  let _obj = options.value.find(item => {return data.model_id === item.id})
  publish_type.value = _obj.publish_type
  //传入modelid
  //传入modelid
  if(publish_type.value === 1){
    toUrl = router.resolve({
      path: '/content/contentManage/stationContent/edit',
      query: {
        modelId: data.model_id,
        catId: data.catid,
        id: data.id
      }
    })
  }else{
    toUrl = router.resolve({
      path: '/content/contentManage/commonContent/edit',
      query: {
        modelId: data.model_id,
        catId: data.catid,
        id: data.id
      }
    })
  }
  window.open(toUrl.href,"_blank")
}

// 删除内容
const handleDelete = (data) => {
  let _deleteList = [data.id]
  ElMessageBox.confirm(
      '<div><p style="font-size: 16px;margin-bottom: 15px;">是否删除该内容？</p><span style="font-size: 14px;color: #FF5240;">清除后内容将无法恢复</span></div>',
      '删除确认',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }
  ).then(() => {
    deleteContent({catid: data.catid,id:_deleteList,model_id: data.model_id}).then(res => {
      if(res.code === 20000){
        ElMessage({
          showClose: true,
          message: '删除成功',
          type: 'success',
        })
      }
      _getContentPage()
    })
  })
}

// 查看详情
const handleViewDetail = (data) => {
  router.push({
    path: '/content/contentManage/stationContent/contentDetail',
    query: {
      modelId: data.model_id,
      id: data.catid,
      contentId: data.id
    }
  })
}
// 前台浏览
const handleView = (data) => {
  if(data.status === 1){
    ElMessage({
      showClose: true,
      message: '未发布无法浏览',
      type: 'info',
    })
  }else{
    window.open(data.url,'_blank')
  }
}
// 切换表格样式(table: 表格样式，card: 卡片样式)
const tableType = computed(() => {return store.state.content.tableType})
const changeTable = (type) => {
  store.commit('content/CHANGE_TABLE_STYLE',type)
}

// 发布内容
const linkToAdd = () => {

}

// 条件查询
const onSubmit = () => {
  
}

onMounted(() => {
  window['updatePage'] = (val) => {
    ElMessage({
      showClose: true,
      message: val,
      type: 'success',
    })
    _getContentPage()
  }
})
</script>
<style lang="scss" scoped>
.my-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(#000,0.1);
  width: 100%;
  margin-top: 15px;
  box-sizing: border-box;
  min-width: 650px;
  padding: 20px;
  .header-top{
    display: flex;
    justify-content: space-between;
    .left-btn{

    }
    .right-btn{
      display: flex;
      .keywords-search {
        width: 320px;
        margin-right: 20px;

        i {
          cursor: pointer;
          color: $mainColor;
        }
      }

      .el-btn2 {
        .search-icon {
          color: $mainColor;
        }

        span {
          margin-left: 5px;
          color: $black;
        }

        .active-focus {
          color: $mainColor;
        }
      }

      .change-card {
        height: 32px;
        width: 64px;
        box-sizing: border-box;
        border: var(--el-border);
        border-radius: 4px;
        display: flex;
        overflow: hidden;
        margin-left: 20px;

        a {
          display: flex;
          width: 50%;
          height: 100%;
          align-items: center;
          justify-content: center;
        }

        a.active {
          background-color: $mainColor;

          i {
            color: #fff;
          }
        }
      }
    }
  }
  .ruifox-card-options{
    .ruifox-card-btn{
      i{
        margin-right: 5px;
      }
    }
  }
}
.button-box{
  padding-right: 10px;
  .el-button+.el-button{
    margin-left: 0;
  }
  flex-grow: 0;
  position: relative;
  i{
    position: absolute;
    right: -13px;
    top: 5px;
    color: $mainColor;
    cursor: pointer;
  }
}
.libarary-table{
  width: 100%;
  ::v-deep(.el-table__cell){
    height: 50px;
    padding: 4px 0;
  }
  .option-btn{
    width: 35px;
  }
}
</style>
